<script src="${request.contextPath}/assets/vendor/clipboard/clipboard.min.js"></script>
<div class="col-md-12">
  <div class="card-header">
    <h3 class="card-title">
      应用拓扑结构-<a href="${request.contextPath}/admin/app/index?appId=${appDesc.appId}">${appDesc.name}</a>
    </h3>
  </div>
  <div class="table-responsive">
    <!-- table begin -->
    <table class="table table-striped table-hover table-bordered">
      <thead>
      <th scope="col">ID</td>
      <th scope="col">实例</td>
      <th scope="col">实例状态</td>
      <th scope="col">内存使用</td>
      <th scope="col">对象数</td>
      <th scope="col">连接数</td>
      <th scope="col">命中率</td>
      <th scope="col">碎片率</td>
      <th scope="col">角色</td>
      <th scope="col">主实例ID</td>
      </thead>
      <tbody>
      <#list instanceList as instance>
        <#assign instanceStatsMapKey=(instance.ip + ":" + instance.port)>
      <#if instanceStatsMap?? && (instanceStatsMap[instanceStatsMapKey])??>
        <#assign instanceStatsInfo=(instanceStatsMap[instanceStatsMapKey])>
      <#else>
        <#assign instanceStatsInfo=''>
      </#if>
      <#if (instance.status==1 || instance.status==0)>
        <tr>
          <th scope="row">
            <a href="${request.contextPath}/admin/instance/index?instanceId=${instance.id}" target="_blank">${instance.id}</a>
            <#if (instance.masterInstanceId == 0 && instance.status != 2)>
              <span class="bi bi-star-fill"></span>
            </#if>
          </th>
          <td><a href="${request.contextPath}/server/index?ip=${instance.ip}" target="_blank">${instance.ip}</a>:${instance.port}
            <#if isAdmin == 1>
              &nbsp;
              <button class="btn" data-bs-container="body" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="right" data-bs-content="Copied!" data-clipboard-text="redis-cli -h ${instance.ip} -p ${instance.port} -a ${appDesc.appPassword}">
                <span class="bi bi-link-45deg"></span>
              </button>
            </#if>
          </td>
          <td>${instance.statusDesc}</td>
          <td>
            <#if instanceStatsInfo?? && (instanceStatsInfo != '') && (instanceStatsInfo.memUsePercent >= 80)>
              <#assign progressBarStatus='bg-danger'>
            <#else>
              <#assign progressBarStatus='bg-success'>
            </#if>
            <div class="progress progress-fs-1">
              <div class="progress-bar ${progressBarStatus}"
                   role="progressbar"
                   <#if instanceStatsInfo?? && (instanceStatsInfo != '')>
                     aria-valuenow="${instanceStatsInfo.memUsePercent}"
                     aria-valuemax="100"
                     aria-valuemin="0"
                     style="width: ${instanceStatsInfo.memUsePercent}%; overflow: visible;"
                   <#else>
                      aria-valuenow="0"
                      aria-valuemax="100"
                      aria-valuemin="0"
                      style="width: 0%; overflow: visible;"
                   </#if>
                >
                <span style="color: #000000; margin-bottom: 0">
                  <#if instanceStatsInfo?? && (instanceStatsInfo != '')>
                    ${(instanceStatsInfo.usedMemory / 1024 / 1024 / 1024)?string('#.##')}G&nbsp;&nbsp;Used
                    /${(instanceStatsInfo.maxMemory / 1024 / 1024 / 1024)?string('#.##')}G&nbsp;&nbsp;Total
                   </#if>
                </span>
              </div>
            </div>
          </td>
          <td>
            <#if instanceStatsInfo?? && (instanceStatsInfo != '')>
              ${instanceStatsInfo.currItems}
            </#if>
          </td>
          <td>
            <a href="${request.contextPath}/admin/instance/index?instanceId=${instance.id}&tabTag=instance_clientList" target="_blank">
              <#if instanceStatsInfo?? && (instanceStatsInfo != '')>
                ${instanceStatsInfo.currConnections}
              </#if>
            </a>
          </td>
          <td>
            <#if instanceStatsInfo?? && (instanceStatsInfo != '')>
              ${instanceStatsInfo.hitPercent}
            </#if>
          </td>
          <td>
            <#if instanceStatsInfo?? && (instanceStatsInfo != '')>
              <#assign memFragmentationRatio=instanceStatsInfo.memFragmentationRatio>
            <#else>
              <#assign memFragmentationRatio=0>
            </#if>
            <#if (memFragmentationRatio > 5) && instanceStatsInfo?? && (instanceStatsInfo != '')  && instanceStatsInfo.usedMemory?? && (instanceStatsInfo.usedMemory > 1024 * 1024 * 100)>
              <#assign memFragmentationRatioLabel='bg-danger'>
            <#elseif (memFragmentationRatio >= 3) && (memFragmentationRatio < 5) && instanceStatsInfo?? && (instanceStatsInfo != '') && instanceStatsInfo.usedMemory?? && (instanceStatsInfo.usedMemory > 1024 * 1024 * 100)>
              <#assign memFragmentationRatioLabel='bg-warning'>
            <#else>
              <#assign memFragmentationRatioLabel='bg-success'>
            </#if>
            <label class="${memFragmentationRatioLabel} rounded">&nbsp;${memFragmentationRatio}&nbsp;</label>
          </td>
          <#if isAdmin == 1>
            <td><a target="_blank" href="${request.contextPath}/manage/instance/log?instanceId=${instance.id}&pageSize=1000">${instance.roleDesc!}</a></td>
          <#else>
            <td>${instance.roleDesc}</td>
          </#if>
          <#if (instance.masterInstanceId >0)>
            <td>
              <a href="${request.contextPath}/admin/instance/index?instanceId=${instance.masterInstanceId}" target="_blank">${instance.masterInstanceId!}</a>
            </td>
          <#else>
              <td></td>
          </#if>
        </tr>
        </#if>
      </#list>
      </tbody>
    </table>
    <!-- End Table with stripped rows -->
  </div>
</div>
<script type="text/javascript">
  $(function () {
    var clipboard = new ClipboardJS('.btn');
    const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
    const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
  });
</script>